<template>
  <div class="page">
    <div class="page__top">
      <van-icon name="arrow-left" @click="$router.back()" />
      <span>商品详情</span>
    </div>

    <div class="page__container" v-for="item in filterList" :key="item.goodsId">
      <div class="img">
        <img :src="item.goodsLogo" alt="" />
      </div>
      <div class="item">
        <p class="title">{{ item.goodsName }}</p>
        <p class="price">
          ¥{{ item.goodsPrice }}<span class="old">{{ item.goodsOldPrice }}</span>
        </p>
        <ul>
          <li class="buy">销量：{{ item.goodsBuyNum }}</li>
          <li class="fav">收藏：{{ item.goodsFav }}</li>
          <li class="are">{{ item.goodsAre }}</li>
        </ul>
      </div>
      <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" />
        <van-action-bar-icon icon="cart-o" text="购物车" badge="5" />
        <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
        <van-action-bar-button
          type="warning"
          text="加入购物车"
          @click="onClick(item as any) as any"
        />
        <van-action-bar-button type="danger" text="立即购买" />
      </van-action-bar>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { setCartGoodsList, type CatsTree } from '@/api'
import { useDetail } from '@/stores/detail-list'
import { useRoute } from 'vue-router'
import { computed } from 'vue'
import { showSuccessToast, showConfirmDialog } from 'vant'
import router from '@/router'

const store = useDetail()
const route = useRoute()

// 获取跳转传来的参数
// @ts-ignore
const params: CatsTree.goodsItem = route.params
const gid = +params.goodsId
const ty = params.type
// console.log(gid,ty);

const list = store.combinedList

const filterList = computed<CatsTree.myGoods>(() => {
  return list.filter((item): CatsTree.goodsItem => {
    // @ts-ignore
    return item.goodsId === gid && item.type === ty
  })
})

async function onClick(item: CatsTree.myGoods) {
  // 调用接口，存放数据到购物车
  await setCartGoodsList(item)
  const userDataInfo: any = window.localStorage.getItem('token')
  console.log('userDataInfo', userDataInfo)
  if (userDataInfo) {
    showSuccessToast({
        message:'添加商品成功',
        forbidClick:true
    })
    
  } else {
    showConfirmDialog({
      title: '添加购物车失败',
      message: '添加购物车需要登入账号，是否需要登入？'
    })
      .then(() => {
        router.replace('/login')
      })
      .catch(() => {
        // on cancel
      })
  }
}
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;

  &__top {
    height: 50px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 10px;
    box-sizing: border-box;

    span {
      height: 50px;
      line-height: 50px;
      text-align: center;
      margin: auto;
      padding-right: 10px;
      box-sizing: border-box;
    }
  }

  &__container {
    height: 100%;
    overflow-y: auto;
    position: relative;

    img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
}

.item {
  padding: 8px;
  height: 200px;
  overflow: hidden;
  background-color: #fff;
  position: absolute;
  margin-top: -130px;

  .title {
    font-size: 18px;
  }

  .price {
    font-size: 24px;
    color: red;
    padding: 10px 0;
    box-sizing: border-box;
    height: 24px;
    line-height: 24px;

    .old {
      margin-left: 14px;
      font-size: 16px;
      color: #999;
      text-decoration: line-through;
    }
  }

  ul {
    color: #999;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
  }
}
</style>
